import React from 'react';
import {useLocation, useModel} from '@umijs/max';
import { Breadcrumb } from 'antd';

export default () => {
    const location = useLocation();
    const {initialState} = useModel('@@initialState');
    const routes: any[] = [];


    const flatRoute = (routeTree: any[]) => {
        routeTree.forEach((route: any) => {
           routes.push(route);
           if (route.routes) {
               flatRoute(route.routes)
           }
        });
    }
    flatRoute(initialState?.routes);
    const getBreadcrumbItems = () => {
        const pathSegments = location.pathname.split('/').filter((segment: any) => segment);
        const items:any = [];
        let currentPath = '';
        pathSegments.forEach((segment: any, index: string | number | bigint | undefined) => {
            currentPath += `/${segment}`;
            const route = routes.find((r: { path: string }) => r.path === currentPath);
            if (route) {
                items.push({title:index === pathSegments.length - 1 ? route.name: <a href={route.path}>{route.name}</a>});
            }
        });
        return items;
    };

    return <Breadcrumb style={{marginLeft: 16}} items={getBreadcrumbItems()}/>;
};
